<!-- 综合病历 -->
<template>
  <div class="mod-config">
      <el-form :inline="true" v-show="searchShow" ref="searchForm" :model="dataForm">
        <table class="miui-table">
          <tr>
            <td class="miui-table-label">裸眼视力</td>
            <td>
              <el-col :span="11">
                <el-input v-model="dataForm.nakedMin"></el-input>
              </el-col>
              <el-col :span="2" style="text-align: center;">至</el-col>
              <el-col :span="11">
                <el-input v-model="dataForm.nakedMax"></el-input>
              </el-col>
            </td>
            <td class="miui-table-label">矫正视力</td>
            <td>
              <el-col :span="11">
                <el-input v-model="dataForm.mainOptCvaMin"></el-input>
              </el-col>
              <el-col :span="2" style="text-align: center;">至</el-col>
              <el-col :span="11">
                <el-input v-model="dataForm.mainOptCvaMax"></el-input>
              </el-col>
            </td>
          </tr>
          <tr>
            <td class="miui-table-label">球镜区间</td>
            <td>
              <el-col :span="11">
                <el-input v-model="dataForm.mainOptBallMin"></el-input>
              </el-col>
              <el-col :span="2" style="text-align: center;">至</el-col>
              <el-col :span="11">
                <el-input v-model="dataForm.mainOptBallMax"></el-input>
              </el-col>
            </td>
            <td class="miui-table-label">柱镜区间</td>
            <td>
              <el-col :span="11">
                <el-input v-model="dataForm.mainOptPostMin"></el-input>
              </el-col>
              <el-col :span="2" style="text-align: center;">至</el-col>
              <el-col :span="11">
                <el-input v-model="dataForm.mainOptPostMax"></el-input>
              </el-col>
            </td>
          </tr>
          <tr>
            <td class="miui-table-label">水平眼位-远</td>
            <td>
              <el-col :span="11">
                <el-input v-model="dataForm.longObliqueMin"></el-input>
              </el-col>
              <el-col :span="2" style="text-align: center;">至</el-col>
              <el-col :span="11">
                <el-input v-model="dataForm.longObliqueMax"></el-input>
              </el-col>
            </td>
            <td class="miui-table-label">水平眼位-近</td>
            <td>
              <el-col :span="11">
                <el-input v-model="dataForm.shortObliqueMin"></el-input>
              </el-col>
              <el-col :span="2" style="text-align: center;">至</el-col>
              <el-col :span="11">
                <el-input v-model="dataForm.shortObliqueMax"></el-input>
              </el-col>
            </td>
          </tr>
          <tr>
            <td class="miui-table-label">PRA</td>
            <td>
              <el-col :span="11">
                <el-input v-model="dataForm.praMin"></el-input>
              </el-col>
              <el-col :span="2" style="text-align: center;">至</el-col>
              <el-col :span="11">
                <el-input v-model="dataForm.praMax"></el-input>
              </el-col>
            </td>
            <td class="miui-table-label">NRA</td>
            <td>
              <el-col :span="11">
                <el-input v-model="dataForm.nraMin"></el-input>
              </el-col>
              <el-col :span="2" style="text-align: center;">至</el-col>
              <el-col :span="11">
                <el-input v-model="dataForm.nraMax"></el-input>
              </el-col>
            </td>
          </tr>
          <tr>
            <td class="miui-table-label">角膜曲率</td>
            <td>
              <el-col :span="11">
                <el-input v-model="dataForm.curvatureMin"></el-input>
              </el-col>
              <el-col :span="2" style="text-align: center;">至</el-col>
              <el-col :span="11">
                <el-input v-model="dataForm.curvatureMax"></el-input>
              </el-col>
            </td>
            <td class="miui-table-label">AC/A值</td>
            <td>
              <el-col :span="11">
                <el-input v-model="dataForm.acaMin"></el-input>
              </el-col>
              <el-col :span="2" style="text-align: center;">至</el-col>
              <el-col :span="11">
                <el-input v-model="dataForm.acaMax"></el-input>
              </el-col>
            </td>
          </tr>
          <tr>
            <td class="miui-table-label">干预类别</td>
            <td>
              <el-select style="width: 140px;" filterable default-first-option clearable v-model="dataForm.meddleType1"
                placeholder="请选择" @change="meddleTypeChangeHandle">
                <el-option v-for="item in meddleTypeList1" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
              <el-select style="width: 140px;" filterable default-first-option clearable v-model="dataForm.meddleType2"
                placeholder="请选择">
                <el-option v-for="item in meddleTypeList2" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>

            </td>
            <td class="miui-table-label">检查次数</td>
            <td>
              <el-col :span="11">
                <el-input v-model="dataForm.checkNumberMin"></el-input>
              </el-col>
              <el-col :span="2" style="text-align: center;">至</el-col>
              <el-col :span="11">
                <el-input v-model="dataForm.checkNumberMax"></el-input>
              </el-col>
            </td>
          </tr>
          <tr>
            <td class="miui-table-label">区域</td>
            <td>
              <el-select style="width: 140px;" filterable default-first-option clearable v-model="dataForm.provinceCode"
                placeholder="请选择" @change="getCitys">
                <el-option v-for="item in provinces" :key="item.id" :label="item.regionName" :value="item.id">
                  <span style="float: left">{{ item.regionName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.code }}</span>
                </el-option>
              </el-select>
              <el-select style="width: 140px;" filterable default-first-option clearable v-model="dataForm.cityCode"
                placeholder="请选择" @change="getAreas">
                <el-option v-for="item in citys" :key="item.id" :label="item.regionName" :value="item.id">
                  <span style="float: left">{{ item.regionName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.code }}</span>
                </el-option>
              </el-select>
              <el-select style="width: 140px;" filterable default-first-option clearable v-model="dataForm.areaCode"
                placeholder="请选择">
                <el-option v-for="item in areas" :key="item.id" :label="item.regionName" :value="item.id">
                  <span style="float: left">{{ item.regionName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.code }}</span>
                </el-option>
              </el-select>
            </td>
            <td class="miui-table-label">角膜厚度</td>
            <td>
              <el-col :span="11">
                <el-input v-model="dataForm.depthMin"></el-input>
              </el-col>
              <el-col :span="2" style="text-align: center;">至</el-col>
              <el-col :span="11">
                <el-input v-model="dataForm.depthMax"></el-input>
              </el-col>
            </td>
          </tr>
          <tr>
            <td class="miui-table-label">末次检查时间</td>
            <td>
              <el-col :span="11">
                <el-input v-model="dataForm.checkDateStart"></el-input>
              </el-col>
              <el-col :span="2" style="text-align: center;">至</el-col>
              <el-col :span="11">
                <el-input v-model="dataForm.checkDateEnd"></el-input>
              </el-col>
            </td>
            <td class="miui-table-label">部门</td>
            <td>
              <el-select v-model="dataForm.deptId">
                <el-option v-for="item in deptOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td class="miui-table-label">视光师</td>
            <td>
              <el-select v-model="dataForm.checkDoctor" filterable clearable>
                <el-option v-for="item in userOption" :value="item.id" :label="item.realName" :key="item.id"></el-option>
              </el-select>
            </td>
            <td class="miui-table-label">姓名</td>
            <td>
              <el-input v-model="dataForm.personName"></el-input>
            </td>
          </tr>

          <tr>
            <td class="miui-table-label">学校名称</td>
            <td>

              <el-col :span="8">
                <el-input v-model="dataForm.schoolId" placeholder="学校">
                  <el-button slot="append" @click="openDialog('school')">选择</el-button>
                </el-input>
              </el-col>
              <el-col :span="8">
                <el-input v-model="dataForm.gradeId" placeholder="年级">
                  <el-button slot="append" @click="openDialog('grade')">选择</el-button>
                </el-input>
              </el-col>
              <el-col :span="8">
                <el-input v-model="dataForm.classId" placeholder="班级">
                  <el-button slot="append" @click="openDialog('class')">选择</el-button>
                </el-input>
              </el-col>
            </td>
            <td class="miui-table-label">联系方式</td>
            <td>
              <el-input v-model="dataForm.telPhone"></el-input>
            </td>
          </tr>
          <tr>
            <td class="miui-table-label">眼轴长度</td>
            <td>
              <el-col :span="11">
                <el-input v-model="dataForm.axialLengthMin"></el-input>
              </el-col>
              <el-col :span="2" style="text-align: center;">至</el-col>
              <el-col :span="11">
                <el-input v-model="dataForm.axialLengthMax"></el-input>
              </el-col>
            </td>
            <td colspan="2" style="text-align: left;">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="searchChange">查询</el-button>
              <el-button type="default" icon="el-icon-delete" size="mini" @click="searchReset">清空</el-button>
            </td>
          </tr>
        </table>
      </el-form>
      <el-row>
        <el-col :span="24">
          <!-- <el-button icon="el-icon-plus" type="primary" @click="addOrUpdateHandle()">新增</el-button> -->
          <el-button icon="el-icon-search" circle @click="handleSearchShow" style="float:right;"></el-button>
          <el-button icon="el-icon-refresh" circle @click="refreshChange" style="float:right;"></el-button>
        </el-col>
      </el-row>
      <div class="avue-crud" style="margin-top: 10px;">
        <el-table :data="dataList" border v-loading="dataListLoading">
          <el-table-column prop="deptName" label="部门"></el-table-column>
          <el-table-column prop="sxhoolName" label="学校"></el-table-column>
          <el-table-column prop="gradeId" label="年级"></el-table-column>
          <el-table-column prop="className" label="班级"></el-table-column>
          <el-table-column prop="personCard" label="就诊卡号"></el-table-column>
          <el-table-column prop="personName" label="姓名"></el-table-column>
          <el-table-column prop="telPhone" label="联系电话"></el-table-column>
          <el-table-column prop="checkDate" label="检查时间"></el-table-column>
          <el-table-column prop="checkDoctorName" label="验光师"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
              <el-button type="text" size="small" icon="el-icon-delete" @click="deleteHandle(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="avue-crud__pagination">
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
      <!-- <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form> -->
      <!-- 弹窗，选择学校 -->
      <search-school v-if="schoolVisible" ref="schoolDialog" @refreshForm="getSchoolData"></search-school>
      <!-- 弹窗，选择年级 -->
      <search-grade v-if="gradeVisible" ref="gradeDialog"  @refreshForm="getGradeData"></search-grade>
      <!-- 弹窗，选择班级 -->
      <search-class v-if="classVisible" ref="classDialog" @refreshForm="getClassData"></search-class>
  </div>
</template>

<script>
  import { filterParams } from '@/util/tools'
  import { fetchList, delObj } from '@/api/pvm/checkdata'
    import { getInfoPageByCaseHistoryParam } from '@/api/pvm/arcoptometry'
  // import TableForm from './checkdata-form'
  import { mapGetters } from 'vuex'

  import { remote } from '@/api/admin/dict'
  import { getListByParentId } from '@/api/admin/region'
  import { fetchSchoolList } from '@/api/pvm/school'

  import SearchSchool from '../../teacher/components/SearchSchool'
  import SearchGrade from '../../class/components/SearchGrade'
  import SearchClass from '../../checkdata/SearchClass'
  import { getUserListByJobType } from '@/api/admin/user'
  import { getDeptInfoByDeptType } from '@/api/admin/dept';

  export default {
    data() {
      return {
        provinces: [],
        citys: [],
        areas: [],
        typeOptions: [],
        schools: [],
        grades: [],
        classes: [],
        userOption: [],
        deptOptions: [],
        meddleTypeList1: [
          {
            value: '1',
            label: '环境干预',
            children: [
              {
                value: '11',
                label: '矫正笔',
              },
              {
                value: '12',
                label: '学生课桌椅',
              },
              {
                value: '13',
                label: '护目灯',
              },
            ]
          },
          {
            value: '2',
            label: '药物干预',
            children: [
              {
                value: '21',
                label: '缓解眼疲劳',
              },
              {
                value: '22',
                label: '降眼压',
              },
              {
                value: '23',
                label: '睫状肌麻痹眼药水',
              },
              {
                value: '24',
                label: '消炎',
              },
            ]
          },
          {
            value: '3',
            label: '营养干预',
            children: [
              {
                value: '31',
                label: '科学营养观念',
              },
            ]
          },
          {
            value: '4',
            label: '物理干预',
            children: [
              {
                value: '41',
                label: '调节/集合训练',
              },
              {
                value: '42',
                label: '弱视训练',
              },
              {
                value: '43',
                label: '眼部按摩仪',
              },
              {
                value: '44',
                label: '弱视治疗仪',
              },
              {
                value: '45',
                label: '哺光仪',
              },
            ]
          },
          {
            value: '5',
            label: '光学干预',
            children: [
              {
                value: '51',
                label: '角膜塑形镜',
              },
              {
                value: '52',
                label: 'RGP',
              },
              {
                value: '53',
                label: 'SCL',
              },
              {
                value: '54',
                label: 'PAL',
              },
              {
                value: '55',
                label: '周边离焦',
              },
              {
                value: '56',
                label: '普通配镜',
              },
              {
                value: '57',
                label: '其他',
              },
            ]
          },
        ],
        meddleTypeList2: [],
        dataForm: {
          province: '',
          city: '',
          area: '',
          schoolType: '',
          schoolId: '',
          gradeId: '',
          classId: '',
          studentName: '',
          checkDate: '',
          meddleType1: '',
          meddleType2: '',
        },
        dataList: [],
        searchShow: true,
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        addOrUpdateVisible: false,
        schoolVisible: false,
        gradeVisible: false,
        classVisible: false
      }
    },
    components: {
      // TableForm,
      SearchSchool,
      SearchGrade,
      SearchClass
    },
    created() {
      this.getDataList()
      this.getProvinces()
      this.getTypeOptions()
      this.getUserList()
      this.getDeptList()
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    methods: {
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        let params1 = {
          current: this.pageIndex,
          size: this.pageSize
        }
        let params2 = filterParams(this.dataForm)
        getInfoPageByCaseHistoryParam(Object.assign(params1,params2)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
          }else{
            this.$message.error(response.data.msg)
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 新增 / 修改
      addOrUpdateHandle(id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 删除
      deleteHandle(id) {
        this.$confirm('是否确认删除ID为' + id, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          return delObj(id)
        }).then(response => {
          if(response.data.code == '0'){
            this.$message.success('删除成功')
            this.getDataList()
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      searchChange() {
        this.pageIndex = 1;
        this.getDataList()
      },
      // 搜索清空
      searchReset() {
        for(let key in this.dataForm){
          this.dataForm[key] = ''
        }
        this.getDataList(this.page)
      },
      handleSearchShow() {
        this.searchShow = !this.searchShow;
      },
      // 刷新回调
      refreshChange() {
        this.getDataList(this.page)
      },
      // 获取干预类别详细分类
      meddleTypeChangeHandle(val){
        this.meddleTypeList2 = []
        let obj = {}
        obj = this.meddleTypeList1.find(item => {
          return item.value == val
        })
        this.meddleTypeList2 = obj.children
      },
      // 获取省级列表
      getProvinces(){
        var parentId = '86';
        getListByParentId(parentId).then(response => {
          if(response.data.code == '0'){
            this.provinces = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        }).catch(() => {
          alert("省级地址出错了，请联系管理员")
        })
      },
      // 获取市级列表
      getCitys(id){
        this.dataForm.city = ''
        this.dataForm.area = ''
        this.citys = []
        this.areas = []
        this.$set(this.dataForm,'city','')
        this.$set(this.dataForm,'area','')
        if(id){
          getListByParentId(id).then(response => {
            if(response.data.code == '0'){
              this.citys = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          }).catch(() => {
            alert("省级地址出错了，请联系管理员")
          });
        }
      },
      // 获取区县级列表
      getAreas(id){
        this.areas = []
        this.$set(this.dataForm,'area','')
        if(id){
          getListByParentId(id).then(response => {
            if(response.data.code == '0'){
              this.areas = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          }).catch(() => {
            alert("省级地址出错了，请联系管理员a ")
          });
        }
      },
      getTypeOptions(){
        remote('school_type').then(response => {
          if(response.data.code == '0'){
            let responseData = response.data.data
            let list = []
            responseData.forEach(item => {
              list.push({label: item.label, value: item.value*1})
            })
            this.typeOptions = [...list]
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      openDialog(type){
        if(type == 'school'){
          let form = {
            province: this.dataForm.province,
            city: this.dataForm.city,
            area: this.dataForm.area,
            schoolType: this.dataForm.schoolType
          }
          this.schoolVisible = true
          this.$nextTick(() => {
            this.$refs.schoolDialog.init(JSON.stringify(form))
          })
        }else if(type == 'grade'){
          if(this.dataForm.schoolId){
            let form = {
              schoolType: this.dataForm.schoolType
            }
            this.gradeVisible = true
            this.$nextTick(() => {
              this.$refs.gradeDialog.init(JSON.stringify(form))
            })
          }else{
            this.$message.warning('请先选择学校')
          }
        }else if(type == 'class'){
          if(this.dataForm.gradeId){
            let form = {
              schoolId: this.dataForm.schoolId,
              schoolName: this.dataForm.schoolName,
              gradeId: this.dataForm.gradeId,
              gradeName: this.dataForm.gradeName
            }
            this.classVisible = true
            this.$nextTick(() => {
              this.$refs.classDialog.init(JSON.stringify(form))
            })
          }else{
            this.$message.warning('请先选择学校年级')
          }
        }
      },
      getSchoolData(val){
        this.$set(this.dataForm,'schoolId',val.id)
        this.$set(this.dataForm,'schoolName',val.schoolName)
        this.$set(this.dataForm,'schoolType',val.schoolType)
      },
      getGradeData(val){
        this.$set(this.dataForm,'gradeId',val.id)
        this.$set(this.dataForm,'gradeName',val.gradeName)
      },
      getClassData(val){
        this.$set(this.dataForm,'classId',val.id)
        this.$set(this.dataForm,'className',val.className)
      },
      //获取主检医生
      getUserList(){
        let jobType = '3'
        getUserListByJobType(jobType).then(response => {
          if(response.data.code == '0'){
            this.userOption = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      getDeptList() {
        getDeptInfoByDeptType(1).then(response => {
          if(response.data.code == '0'){
            let result = response.data.data
            let list = []
            result.forEach(item => {
              list.push({
                value: item.id,
                label: item.name
              })
            })
            this.deptOptions = list
          }else{
            this.$message.error(response.data.msg)
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .el-col {
    margin-bottom: 0 !important;
  }
  .miui-table {
    width: 100%;
    margin: 10px 0;
    background-color: #b1e2ec3b;
    tr th {
      background-color: #f4f5f7;
    }

    tr th, tr td {
      padding: 10px 8px;
      border: solid 1px #fff;
      text-align: center;
    }
    .miui-table-header td{
      background-color: #7898a8;
      color: #fff;
    }
    .miui-table-tbody{
      background-color: #cadee8;
    }
    .miui-table-label {
      width: 120px;
      background-color: #b2d5f6;
    }
  }
</style>
